<template>
  <div class="conifg">
    <div class="conifg1">
      <span class="conifg1-title">清洗过程配置</span>
      <div class="conifg1-div f-row">
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">步骤一:第一次清水清洗</span>
            <el-input class="item-2" v-model="washData.step1" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤二:沐浴露清洗</span>
            <el-input class="item-2" v-model="washData.step2" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤三:第二次清水清洗</span>
            <el-input class="item-2" v-model="washData.step3" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
        </div>
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">步骤四:护毛素清洗</span>
            <el-input class="item-2" v-model="washData.step4" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤五:第三次清水清洗</span>
            <el-input class="item-2" v-model="washData.step5" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤六:烘干时间</span>
            <el-input class="item-2" v-model="washData.step6" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
        </div>
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">步骤七:消毒液</span>
            <el-input class="item-2" v-model="washData.step7" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤八:吹风机</span>
            <el-input class="item-2" v-model="washData.step8" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤九:清水冲洗</span>
            <el-input class="item-2" v-model="washData.step9" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
        </div>
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">喷沐浴露时间</span>
            <el-input class="item-2" v-model="washData.soapUseTime" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">喷护毛素时间</span>
            <el-input class="item-2" v-model="washData.conditionerUseTime" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">步骤间隔</span>
            <el-input class="item-2" v-model="washData.stepTime" placeholder="请输入" size="medium"></el-input>
            <span class="item-3">秒</span>
          </div>
        </div>
      </div>
      <div class="conifg1-div" style="padding-top: 0px">
        <el-button type="primary" @click="updateWashStep">保存修改</el-button>
      </div>
    </div>
    <div class="conifg1">
      <span class="conifg1-title">水温配置</span>
      <div class="conifg1-div f-row">
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">水温加热最低温度</span>
            <el-input class="item-2" v-model="deviceData.lowTemp" placeholder="请输入" size="medium"></el-input>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">水温停止加热最高温度</span>
            <el-input class="item-2" v-model="deviceData.stopHighTemp" placeholder="请输入" size="medium"></el-input>
          </div>
        </div>
        <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">加热丝打开最低温度</span>
            <el-input class="item-2" v-model="deviceData.downTemp" placeholder="请输入" size="medium"></el-input>
          </div>
          <div class="item f-row a-i-c">
            <span class="item-1">加热丝关闭最高温度</span>
            <el-input class="item-2" v-model="deviceData.upTemp" placeholder="请输入" size="medium"></el-input>
          </div>
        </div>
        <!-- <div class="conifg1-div-1 f-col">
          <div class="item f-row a-i-c">
            <span class="item-1">联系管理员</span>
            <el-input class="item-2" style="width: 180px" v-model="deviceData.adminPhone" placeholder="请输入" size="medium"></el-input>
          </div>
        </div> -->
      </div>
      <div class="conifg1-div" style="padding-top: 0px">
        <el-button type="primary" @click="updateDeviceConfig">保存修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { deviceQueryDeviceConfigApi, deviceQueryWashStepApi, deviceUpdateDeviceConfigApi, deviceUpdateWashStepApi } from '@/api/deviceApi'
export default {
  components: {},
  props: {},
  data() {
    return {
      step1: '',
      deviceData: {
        adminPhone: '',
        createId: '',
        createTime: '',
        delFlag: '',
        downTemp: '',
        id: '',
        lowTemp: '',
        stopHighTemp: '',
        upTemp: '',
        updateTime: ''
      },
      washData: {
        id: '',
        step1: '',
        step2: '',
        step3: '',
        step4: '',
        step5: '',
        step6: '',
        step7: '',
        step8: '',
        step9: '',
        soapUseTime: '',
        conditionerUseTime: '',
        stepTime: ''
      }
    }
  },
  computed: {},
  created() {
    this.getDeviceConfig()
    this.getWashStep()
  },
  methods: {
    getDeviceConfig() {
      deviceQueryDeviceConfigApi({}).then(res => {
        console.log('112===', res)
        this.deviceData = res.data
      })
    },
    getWashStep() {
      deviceQueryWashStepApi({}).then(res => {
        console.log('133====', res)
        res.data.step1 = res.data.step1 / 1000
        res.data.step2 = res.data.step2 / 1000
        res.data.step3 = res.data.step3 / 1000
        res.data.step4 = res.data.step4 / 1000
        res.data.step5 = res.data.step5 / 1000
        res.data.step6 = res.data.step6 / 1000
        res.data.step7 = res.data.step7 / 1000
        res.data.step8 = res.data.step8 / 1000
        res.data.step9 = res.data.step9 / 1000
        res.data.soapUseTime = res.data.soapUseTime / 1000
        res.data.conditionerUseTime = res.data.conditionerUseTime / 1000
        res.data.stepTime = res.data.stepTime / 1000

        this.washData = res.data
      })
    },
    updateDeviceConfig() {
      deviceUpdateDeviceConfigApi({
        id: this.deviceData.id,
        lowTemp: this.deviceData.lowTemp,
        stopHighTemp: this.deviceData.stopHighTemp,
        upTemp: this.deviceData.upTemp,
        downTemp: this.deviceData.downTemp
      }).then(res => {
        console.log('167===', res)
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.getDeviceConfig()
      })
    },
    updateWashStep() {
      deviceUpdateWashStepApi({
        id: this.washData.id,
        step1: this.washData.step1 * 1000,
        step2: this.washData.step2 * 1000,
        step3: this.washData.step3 * 1000,
        step4: this.washData.step4 * 1000,
        step5: this.washData.step5 * 1000,
        step6: this.washData.step6 * 1000,
        step7: this.washData.step7 * 1000,
        step8: this.washData.step8 * 1000,
        step9: this.washData.step9 * 1000,
        soapUseTime: this.washData.soapUseTime * 1000,
        conditionerUseTime: this.washData.conditionerUseTime * 1000,
        stepTime: this.washData.stepTime * 1000
      }).then(res => {
        console.log('207====', res)
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.getWashStep()
      })
    }
  }
}
</script>

<style scoped>
.conifg {
  box-sizing: border-box;
  padding: 20px;
}
.conifg1 {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.conifg1-title {
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}
.conifg1-div {
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
}
.conifg1-div-1 {
  width: 400px;
}
.conifg1-div-1 .item {
  width: 400px;
  margin-bottom: 20px;
}
.conifg1-div-1 .item .item-1 {
  width: 160px;
}
.conifg1-div-1 .item .item-2 {
  width: 150px;
}
.conifg1-div-1 .item .item-3 {
  box-sizing: border-box;
  width: 100px;
  padding-left: 5px;
}
</style>
